ASP NET - Menu

O controle menu do ASP NET é um componente que hoje perdeu o significado porque é muito mais fácil usar o do bootstrap e o visual também é excelente, mas neste documento informo como usar este componente.

A primeira coisa que você ja deve saber é que o menu é hierarquico, ou seja, posso agrupar num menu quandos sub-menus quiser e estes sub-menus podem ter quantos sub-menus quiserem.

Como o menu pode ser extenso e ocuparia uma grande área na tela deixando os demais objetos escondidos por trás dele, os sub-menus não são exibidos até que o menu que os contém seja selecionado.

A segunda coisa que deve saber é que podemos definir estilos para cada elemento do menu, os estáticos (menus de mais alto nível), quando o mouse passa sobre o item do menu (hover), um sub-menu(dynamicMenuItem) e quando passamos o mouse sobre um sub-menu (dynamicHoverStyle).
Posso lhe garantir que a beleza do menu esta neste tópico, faz toda diferença.

A tag <asp:menu informa o inicio do menu e a tag </asp:menu> o fim do menu.

Para definir um item do menu basta usar a tag <asp:menuitem.
Se o item do menu não possui sub-menu então termina com />

Se o item do menu tem sub-menu então ele fecha como > e novos <asp:menuitem estarão presentes nele em igual número ao número de sub-menus. Por fim a tag </asp:menuitem> fecha a tag do menu pai.

O parâmetro navigateurl="xxx" define o link para onde a página deve navegar se o link for clicado.

O parâmetro text="Texto" é o que é exibido no menu.

O parâmetro tooltip="Dica" é a dica que é exibida quando passamos o mouse sobre o item do menu e ele está visivel.

Exemplo de como um menu e exibido:

Nota 1 : Veja que o menu foi exibido onde eu defini ele na página portanto se ele ficar no rodapé da página certifique-se que há espaço para exibir todo o menu ou o efeito será bizarro. Se for na lateral direita da página que seja antes do fim da largura da página porque o controle poderá redimensionar a largura da página conforme exibe o item e estreitar conforme o item é escondido.

Veja o código do controle menu:
            <asp:Menu ID="NavigationMenu" StaticDisplayLevels="2" runat="server">

                <StaticMenuItemStyle BackColor="LightBlue" ForeColor="Black" />
                <StaticHoverStyle BackColor="LightSkyBlue" />
                <DynamicMenuItemStyle BackColor="lightgreen" ForeColor="Brown" />
                <DynamicHoverStyle BackColor="LightSkyBlue" ForeColor="Black" />

                <Items>
                    <asp:MenuItem NavigateUrl="Home.aspx" Text="Home" ToolTip="Home">

                        <asp:MenuItem NavigateUrl="Musicas.aspx" Text="Musicas" ToolTip="Musicas">
                            <asp:MenuItem NavigateUrl="Classicas.aspx" Text="Classicas" ToolTip="Classicas" />
                            <asp:MenuItem NavigateUrl="Rock.aspx" Text="Rock" ToolTip="Rock" />
                            <asp:MenuItem NavigateUrl="Jazz.aspx" Text="Jazz" ToolTip="Jazz" />
                            <asp:MenuItem NavigateUrl="Samba.aspx" Text="Samba" ToolTip="Samba" />
                            <asp:MenuItem NavigateUrl="Pagode.aspx" Text="Pagode" ToolTip="Pagode" />
                            <asp:MenuItem NavigateUrl="Mpb.aspx" Text="MPB" ToolTip="MPB" />
                        </asp:MenuItem>

                        <asp:MenuItem NavigateUrl="Filmes.aspx" Text="Filmes" ToolTip="Filmes">
                            <asp:MenuItem NavigateUrl="Ação.aspx" Text="Ação" ToolTip="Acão" />
                            <asp:MenuItem NavigateUrl="Drama.aspx" Text="Drama" ToolTip="Drama" />
                            <asp:MenuItem NavigateUrl="Musical.aspx" Text="Musical" ToolTip="Musical" />
                        </asp:MenuItem>
                    </asp:MenuItem>

                </Items>
            </asp:Menu>

Menu Dinâmico

Vamos supor que você precisa de um menu de acordo com um perfil de usuário, ou seja, os itens do menu dependerão de uma condição, se presente deve ser exibido, se ausente não.

O menu abaixo é um exemplo.

Código de como foi implementado: 1 - script

Código de como foi implementado: 2 - menu :

<div align="center" class="menu" >
                <asp:Menu
                    ID="Menu1"
                    runat="server"
                    Orientation="Horizontal"
                    tooltip="Clique aqui para acessar as funcionalidades do site."
                    disappearafter="1000"
                    CssClass="menu"
                    DynamicHoverStyle-BackColor="#66FF33"
                    DynamicHoverStyle-BorderColor="#FF9900"
                    DynamicHoverStyle-BorderStyle="Dotted"
                    DynamicHoverStyle-ForeColor="#3333FF"
                    DynamicSelectedStyle-ForeColor="#6666FF"
                    DynamicSelectedStyle-BorderStyle="Dotted"
                    DynamicSelectedStyle-BorderWidth="1"
                    StaticMenuStyle-BorderColor="Orange"
                    StaticMenuItemStyle-ForeColor="#FFFF99"
                    StaticMenuItemStyle-BorderColor="#00FFCC"
                    Width="100%"
                    ForeColor="Blue"
                    Font-Size="20px"
                    Font-Names="calibri"
                    EnableTheming="True">
                    <StaticHoverStyle ForeColor="Blue" BackColor="LightBlue"/>
                    <StaticMenuItemStyle BackColor="LightPink" horizontalpadding="30" />
                    <DynamicMenuItemStyle BackColor="LightBlue"></DynamicMenuItemStyle>
                    <Items>
                        <asp:MenuItem NavigateUrl="#" Text="Avisos"/>
                    </Items>
                    <StaticMenuItemStyle BackColor="#EEEEEE" ForeColor="Blue" ItemSpacing="8px" />
                    <StaticHoverStyle BackColor="#000000" ForeColor="White" />
                    <DynamicHoverStyle BackColor="#EEEEEE" />
                    <DynamicMenuStyle BackColor="#EEEEEE"
                            BorderColor="#CCCCCC"
                            BorderStyle="Solid"
                            BorderWidth="1px"
                            horizontalpadding="30" />
                    <StaticSelectedStyle BackColor="#EEEEEE" />
                    <DynamicMenuItemStyle BackColor="#EEEEEE"
                                BorderColor="#CCCCCC"
                                BorderStyle="Solid"
                                BorderWidth="1px"
                                ForeColor="Black"
                                HorizontalPadding="4px"
                                VerticalPadding="4px" />
                </asp:Menu>

Código de como foi implementado: 3 - Botão :

<asp:Button ID="btnInserir" runat="server" Text="Inserir" OnClick="btnInserir_Click" />

Rotina que acrescenta o item ao menu:

Importante :

1 - O menu precisa estar dentro de um form com runat=server para funcionar.

2 - Ao inserir um novo item no menu será verificado se o destino realmente existe ou não. Ocorrerá um erro se não existir e o erro mais comum é quando colocamos .. a mais no link e este acaba apontando para uma página acima da root ou home - Isso é impossível para o site.